<template>
	<!--pages/themeInof/themeInfo.wxml-->
	<view>
		<view class="title-bag">
			<view class="iconbox"><text @click="back()" style="font-size: 40upx;" class="back iconfont icon-left"></text></view>
			<image  :src="attribute"></image>
		</view>
		<view class="mian">
		  <view class="title">
		    <text class="left-icon iconfont icon-doubleright"></text>
		    <text>热门游记推荐</text>
		  </view>
		  <view class="content">
		    <block v-for="(item,index) in themeInfo" :key="index">
		      <view class="content-box" @click="goToDetails(item.id)">
		        <view class="content-img">
		          <image :src="item.listImage"></image>
		        </view>
		        <view class="content-texts">
		          <view class="content-text">
		            <text>{{item.title}}</text>
		          </view>
		          <view style=" padding-left: 26upx;padding-top: 10upx;">
		            <view class="info">
		              <view class="portrait">
		                <image :src="item.headPortrait"></image>
		              </view>
		              <view class="author">
		                <text>{{item.nickname}}</text>
		              </view>
		            </view>
		          </view>
		        </view>
		      </view>
		    </block>
		    <wxc-flex v-if = 'isNoMore && themeInfo.length > 0' dir='left' main='center' cross='center' style='width:100%;margin-top:40upx;margin-bottom:40upx;'>
		    		<vline color='#DDDDDD' width='120upx' height='1px'></vline>
		    		<text class='font-r' style='font-size:24upx;color:#464646;margin-left:26upx;margin-right:26upx;'>没有更多数据啦</text>
		    		<vline color='#DDDDDD' width='120upx' height='1px'></vline>
		    </wxc-flex>
		  </view>
		  
		</view>
	</view>
	
	
</template>

<script>
	import uParse from "@/components/gaoyia-parse/parse.vue"
	import wxcFlex from "@/components/custom/flex.vue"
	var currentPage = 1
	export default {
		components:{
			uParse,
			wxcFlex
		},
		data() {
			return {
				attribute:'',
				title:'',
				themeInfo:[],
				ids:'',
				isEmpty: false,
				isNoMore: false
			};
		},
		onLoad: function(options) {
			 currentPage = 1
			    var attributes = options.name
				var ids = options.id
				this.ids = ids
			    console.log("1111111111111111111",options)
			    if (attributes == "丝路画卷 河西明珠") {
			          this.attribute = "https://sz.smates.cn/filemanager/file/view/d9de971596c04cd7a2cd1b79a40ebb3f/full"
			          this.title = "丝路画卷 河西明珠"
			    } else if (attributes == "民间艺术 世界瑰宝"){

			        this.attribute =  "https://sz.smates.cn/filemanager/file/view/59e1f12dbd88493fa4960022fb8d73b3/full"
			        this.title = "民间艺术 世界瑰宝"

			    } else if (attributes == "寻味舌尖上的甘肃") {

			        this.title ="寻味舌尖上的甘肃"
			        this.attribute = "https://sz.smates.cn/filemanager/file/view/a3c42533d10646979a9c8f23c8fe2634/full"

			    } else if (attributes == "美丽山水 画卷陇原") {

			        this.title = "美丽山水 画卷陇原"
			        this.attribute = "https://sz.smates.cn/filemanager/file/view/a64dc1a5122e42248f67c0063e233824/full"

			    }
			    this.getToTheme(ids)
			    console.log(this.attribute)
		},
		onReachBottom: function () {
			if (!this.isNoMore) {
				this.getToTheme(this.ids)
			}
		},
		methods: {
			getToTheme: function (ids) {
			    uni.showLoading({
			      title: '加载中...',
			    })
			    let that = this
			    var params = {
			      channelType: '1',
			      // type: '2',
			      pageIndex: currentPage,
			      pageSize: "6",
			      noteTypeCode: ids
			    }
				this.$postApi(this.$path.GET_NEW_DESTINATION_TRAVELS,params).then(res => {
			      uni.hideLoading();
			      console.log('------------------------->>>>>>>>>>>>', res)
			      var data = res.data.data
			      if (res.data.success) {
			        if (currentPage == 1) {
			          var content = data.list
			        } else {
			          var content = this.themeInfo.concat(data.list)
			          console.log("contnet", content)
			        }
			
			        var isNoMore = false;
			        var isEmpty = false;
			        if (content.length == 0) {
			          isEmpty = true;
			          isNoMore = false;
			        } else if (!data.hasNextPage) {
			          //已经无再多数据
			          isNoMore = true;
			          isEmpty = false;
			        }
			        currentPage++;
					 this.themeInfo = content
					 this.isNoMore = isNoMore
					 this.isEmpty = isEmpty
			        console.log("isNoMore----------------------->",this.isNoMore)
			       
			      }
			    });
			  },
			  goToDetails: function (id) {
			    console.log('跳转')
				uni.navigateTo({
					url:'/pages/travelDetail/travelDetail?id=' + id,
					animationType: 'pop-in',
					animationDuration: 200
				})
			  },
			  back() {
			  	uni.navigateBack({
			  		delta: 1
			  	});
			  },
			
		}
	}
</script>


<style>
	/* pages/themeInof/themeInfo.wxss */
	.iconbox{
		position: fixed;
		border-radius: 50%;
		left: 35upx;
		top: 85upx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		background: rgba(255,255,255,0.6);
		width: 50upx;
		height: 50upx;
	}
	.back {
	  /* position: fixed; */
	  /* margin-top: 26upx; */
	  /* margin-left: 26upx; */ 
	  /* width: 56upx; */
	  /* height: 56upx; */
	  /* z-index: 999; */
	}
	.mian{
	  margin-top: -20upx;
	  border-radius: 25upx;
	  padding: 60upx 25upx 0 25upx;
	  position: relative;
	  background: #fff;
	
	}
	.title-bag{
		position: relative;
	  width: 100%;
	  height: 500upx;
	}
	.title-bag image{
	  width: 100%;
	  height: 100%;
	}
	.title{
	 font-family: PingFang-SC-Bold;
		font-size: 36upx;
		font-weight: bold;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #333333;
	}
	.left-icon{
	  color: #0092ff;
	  font-size: 36upx;
	  font-weight: bold;
	}
	.content{
	  width: 100%;
	  height: 100%;
	  display: flex;
	  flex-wrap: wrap;
	  flex-direction: row;
	  justify-content: space-between;
	}
	.content-box{
	  margin-bottom:20upx;
	}
	.content-img{
	  width: 343upx;
		height: 221upx;
	}
	.content-img image{
	  width: 100%;
	  height: 100%;
	  border-radius: 10upx 10upx 0upx 0upx;
	
	}
	.content-texts{
	  
	  background-color: #ffffff;
		box-shadow: 0upx 3upx 13upx 1upx 
			rgba(34, 24, 21, 0.07);
		border-radius: 10upx;
	  width: 343upx;
	  /* height: 198upx; */
	  padding-bottom: 30upx;
	}
	.portrait{
	  width: 38upx;
		height: 38upx;
	  border-radius: 50%;
	}
	.info{
	  display: flex;
	
	}
	.content-text {
		font-size: 30upx;
		height: 100upx;
		line-height: 40upx;
		padding: 20upx 20upx 20upx 30upx;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	
	}
	.theme-texts-title{
	  overflow:hidden; 
	  text-overflow:ellipsis;
	  line-height: 25upx;
	  display:-webkit-box!important; 
	  -webkit-box-orient:vertical;
	  -webkit-line-clamp:2;
	  line-clamp: 2;
	  word-break:break-all;
	}
	.theme-texts-title text{
	
	}
	.title{
	  margin-bottom: 30upx;
	}
	.portrait image{
	  width: 100%;
	  height: 100%;
	  border-radius: 50%;
	  margin-left: 20rxp;
	}
	.author{
	  padding-left:25upx; 
	  font-family: PingFang-SC-Regular;
		font-size: 22upx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34upx;
		letter-spacing: 0upx;
		color: #808080;
	}
</style>
